<template>
  <div class="page-container" style="flex-direction: row">
    <div class="page-left fx-sk mg-rt-16 pd-24 bg-fff bd-rd-8">
      <TrTreeFilterVue
        ref="trTree"
        lazy
        :loadFun="loadFun"
        :treeData="treeData"
        @select-back="selectBack"
      />
    </div>
    <div class="page-right fx fx-cl bd-rd-8 fx-full wd-0">
      <div class="common-content-wrap">
        <TrTable
          ref="trTable"
          :isNeedIndex="true"
          :title="'部门列表'"
          :btnList="btnList"
          :total="totalNum"
          v-model="searchParams"
          :searchShowList="searchShowList"
          :tableColumn="tableColumn"
          requestName="searchHandle"
          :tableData="tableData"
          @rowEdit="operateHandle($event, 'rowEdit')"
          @export="operateHandle($event, 'export')"
        />
      </div>
    </div>
    <TrEditPopup
      v-model="isShowEdit"
      :width="480"
      :title="'编辑'"
      :valueObj.sync="formObj"
      :formData="formData"
      :list="popupList"
      @close="isShowEdit = false"
      @confrim="confrimHandle"
    />
  </div>
</template>

<script>
import { getList, edit } from "@/api/system/personnel";
import { getDeptLazyTree } from "@/api/system/dept";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";
import TrTreeFilterVue from "@/components/Tr-tree-filter/Tr-tree-filter.vue";
export default {
  name: "UserBox",
  components: {
    TrTreeFilterVue,
    TrEditPopup,
    TrTable,
  },
  computed: {},
  watch: {},
  data() {
    return {
      isShowEdit: false,
      formData: {},
      formObj: {},
      popupList: [
        {
          label: "人员编码",
          type: "input",
          width: 100,
          value: "",
          disabled: true,
          isNeed: true,
          id: "account",
        },
        {
          label: "姓名",
          disabled: true,
          isNeed: true,
          type: "input",
          width: 100,
          value: "",
          id: "realName",
        },
        {
          label: "部门",
          disabled: true,
          isNeed: true,
          type: "input",
          width: 100,
          value: "",
          id: "deptName",
        },
        {
          label: "电话",
          disabled: false,
          isNeed: false,
          type: "input",
          width: 100,
          value: "",
          id: "phone",
          verRule: (val) => {
            return /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8})$/.test(val);
          },
        },
        {
          label: "邮箱",
          type: "input",
          disabled: false,
          isNeed: false,
          width: 100,
          value: "",
          id: "email",
          verType: "email",
        },
      ],
      totalNum: 0,
      searchParams: {
        staffId: "",
        phone: "",
        account: "",
        factoryId: "",
        current: 1,
        size: 10,
      },
      tableData: [],
      searchShowList: [
        {
          label: "人员编码",
          type: "input",
          width: 50,
          value: "",
          id: "account",
        },
        {
          label: "姓名",
          type: "input",
          width: 50,
          value: "",
          id: "realName",
        },
        {
          label: "电话",
          type: "input",
          width: 50,
          value: "",
          id: "phone",
          list: [],
        },
      ],
      btnList: [
        // {
        //   label: "导出",
        //   option: "export",
        //   color: "blue",
        // },
      ],
      tableColumn: [
        {
          type: "text",
          label: "人员编号",
          value: "account",
        },
        {
          type: "text",
          label: "姓名",
          value: "realName",
        },
        {
          type: "text",
          label: "电话",
          value: "phone",
        },
        {
          type: "text",
          label: "部门",
          value: "deptName",
        },
        {
          type: "text",
          label: "邮箱",
          value: "email",
        },
        {
          type: "option",
          label: "操作",
          fixed: "right",
          width: 80,
          showBtnList: [
            {
              label: "编辑",
              option: "rowEdit",
            },
          ],
        },
      ],
      treeData: [],
    };
  },
  methods: {
    async edit(params) {
      let res = await edit(params);
      // console.log(res);
      if (res.data.code != 200) return this.$message.error(res.data.msg);
      this.$message.success(this.$t("msg.success"));
      this.isShowEdit = false;
      this.getListHandle(this.searchParams);
    },
    confrimHandle() {
      this.formObj.id = this.formData.id;
      this.edit(this.formObj);
    },
    loadFun(node, resolve) {
      if (node.level === 0) this.getleftTreeHandle(0, resolve);
      return this.getleftTreeHandle(node.data.id, resolve);
    },
    getleftTreeHandle(id, resolve) {
      getDeptLazyTree(id).then((res) => {
        if (resolve) {
          resolve(res.data.data);
        } else {
          this.treeData = res.data.data;
        }
      });
    },
    getListHandle(params) {
      getList(params).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.totalNum = data.total;
        this.tableData = data.records;
        this.$validateData(this.tableData);
      });
    },
    operateHandle(val, type) {
      this.$validateData(val, 3);
      switch (type) {
        case "export":
          this.exportHandle();
          // console.log("导出！！");
          break;
        case "rowEdit":
          {
            this.formData = val;
            this.isShowEdit = true;
            console.log("编辑！！");
          }

          break;
        default:
          console.log("11");
          break;
      }
    },
    exportHandle() {
      this.$textShow({
        title: "导出",
        content: [this.$t("tip.export")],
      })
        .then(() => {
          this.$load.show();
          this.exportParams.size = 1000;
          // exportTableData(this.exportParams || this.searchParams)
          //   .then((res) => {
          //     if (res.status != 200)
          //       return this.$message.error(this.$t("msg.exportFailed"));
          //     let timeStr = moment().format("YYYYMMDD-HHmmss");
          //     const fileName = `物料-${timeStr}` + ".xlsx";
          //     comExport(res.data, fileName);
          //     this.$message.success(this.$t("msg.exportSuccess"));
          //   })
          //   .finally(() => {
          //     this.$load.close();
          //   });
        })
        .catch(() => {});
    },
    searchHandle() {
      this.getListHandle(this.searchParams);
    },
    selectBack(data) {
      this.searchParams.deptId = data.id;
      this.searchParams.current = 1;
      this.getListHandle(this.searchParams);
    },
  },
  mounted() {
    // this.getListHandle(this.searchParams);
  },
};
</script>

<style></style>
